<template>
  <div class="component-name">
    子组件
    <router-view></router-view> <!--试图呈现-->
    <input type="text" v-model="name">
  </div>
</template>

<script>
export default {
  name: 'Child-Page',
  components: { //注册组件

  },
  props: { //props传递数据

  },
  data() {
    return { //数据
      name: ''
    }
  },
  computed: { //计算属性

  },
  watch: { //监听器

  },
  methods: { //方法

  },
  mounted() { //挂载完成(生命周期,钩子函数)

  },
  beforeDestroy() { //将要销毁(生命周期,钩子函数)

  },
  //2个钩子函数：路由组件独有
  activated() { //路由组件激活(切入)
    this.timer = setInterval(() => { //定时器
      console.log('路由组件激活(切入子)')
    }, 1000)
  },
  deactivated() { //路由组件失活(切出)
    console.log('路由组件失活(切出子)')
    clearInterval(this.timer)
  }
}
</script>

<style lang="less" scoped>
.component-name {}
</style>